<template>
  <ul
    v-if="visible"
    class="qq-tray-menu"
    ref="trayMenuDom"
    :style="{ left: `${position[0]}px`, top: `${position[1]}px` }"
  >
    <li v-for="item in menuList" :key="item.name" :class="{ br: !item.name }" @click.stop="item.event">
      {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useClickBlankHidden } from '@/hooks'
import type { IRunningTasksList } from '@/stores/taskBar/runningTasks'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'QQTrayMenu',
  props: {
    modelValue: {
      type: Boolean as PropType<boolean>,
      required: true
    },
    position: {
      type: Array as PropType<number[]>,
      required: true,
      default: () => [0, 0]
    },
    appId: {
      type: String as PropType<string>,
      required: true
    },
    taskId: {
      type: String as PropType<string>,
      required: true
    },
    data: {
      type: Object as PropType<IRunningTasksList>,
      default: undefined
    }
  },
  emits: ['update:modelValue'],
  setup(props, ctx) {
    const runningTasksStore = useRunningTasksStore()
    const trayMenuDom = ref<HTMLElement>()
    const visible = ref<boolean>(props.modelValue)
    const defaultList = [
      { name: '打开主面板' },
      {
        name: '退出',
        event: () => {
          runningTasksStore.closeTask(props.appId, props.taskId)
          ctx.emit('update:modelValue', false)
        }
      }
    ]
    const loginList = [
      { name: '我在线上' },
      { name: 'Q我吧' },
      { name: '离开' },
      { name: '忙碌' },
      { name: '请勿打扰' },
      { name: '隐身' },
      { name: '离线' },
      { name: '' },
      { name: '关闭所有声音' },
      { name: '关闭头像闪烁' },
      { name: '' },
      { name: '锁定QQ' }
    ]
    const menuList = computed(() => {
      const isLogin = props.data?.componentData?.isLogin
      if (isLogin) defaultList.unshift(...loginList)
      return defaultList
    })

    const handleCloseWeChat = () => {
      runningTasksStore.closeTask(props.appId, props.taskId)
      ctx.emit('update:modelValue', false)
    }

    useClickBlankHidden(
      () => trayMenuDom.value,
      () => {
        visible.value = false
        ctx.emit('update:modelValue', false)
      }
    )

    watch(
      () => props.modelValue,
      (val: boolean) => {
        visible.value = val
      }
    )

    return {
      visible,
      menuList,
      trayMenuDom,
      handleCloseWeChat
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.qq-tray-menu {
  position: fixed;
  z-index: $z-index-task-bar;
  padding: 8px 0;
  width: 138px;
  border-radius: 6px;
  transform: translateY(-100%);
  background-color: rgb(235, 235, 235, 0.9);

  li {
    height: 30px;
    line-height: 30px;
    padding-left: 15px;

    &:hover {
      background-color: rgb(218, 218, 218);
    }

    &.br {
      height: 1px;
      background-color: rgb(218, 218, 218);
      margin: 8px 0;
    }
  }
}
</style>
